By Tar van Krieken
and Sancarn

Documentation Markup Language

General Syntax

Nested DML

DML is nested inside all elements. You can put DML inside other DML elements. For example here's a spoiler inside a spoiler inside a spoiler:

[spoiler]
    [spoiler]
        [spoiler]
            *|Very hidden text.|*
        [/spoiler]
    [/spoiler]
[/spoiler]

Indenting text

Syntax

text
    indented text
other text

Only soft tabs will properly be indented and the first indent within a BBCode tag will automatically be remove, and won't become an indent in the output.

Note that indents are treated as any other wrapper around text,
This means that the following won't work:

[p]
        text
        [/p]
other text

For the same reason that

[p][b]text[/p][b]

won't work. The indent group must be closed, before the paragraph can be closed.

Preview

text

indented text

other text

Paragraphs

Syntax

[p]
    Some cool text here
[/p]
[p]
    Some more cool text here
[/p]

Syntax

some line of text`
some new line

Alternatively you can use the newlines bbtag:

[linebreaks]
    some
    multiline
    text
[/linebreaks]

Preview

some line of text
some new line some
multiline
text

Comment

Syntax

[[ this is a comment

Comments will not appear in the compiled html document. They are good for documentation as to why you documented something in a certain way or todo lists! For example:

[[ To do list
[[ * Document about great feature x
[[ * Do some other useful thing
...

Note

You cannot really use a comment on the same line as another part of DML. For example:

Some line of dml`    [[some amazing comment
another line of dml`

In the above case the back tick will be interprated as a code block instead of a back tick lead by a comment. This is an inbuilt limitation of how DML works and would require a complete re-write of the engine to fix.

Headers

Headers are useful for cutting your documentation up into different sections. When a header is added to the document it will also be added to the index which can be found in the menu in the top-right corner of the page on small devices, or towards the right of the page on larger devices.

Syntax

# Header 1
## Header 2
### Header 3
#### Header 4
...

Preview

Header 1

Header 2

Header 3

Header 4

Bullet points

Syntax

* Bullet type 1`
** Bullet type 2`
*** Bullet type 3`

Preview

• Bullet type 1
○ Bullet type 2
▪ Bullet type 3

Text allignment

Often it is required to allign text to a specific position of the page. To do this we have provided some bbcode tags which help allign text to certain position on the page.

Syntax

[center]Some[/center]
[left]awesome[/left]
[right]text[/right]

Preview

Some

awesome

text

Escaping

Sometimes you might want to add a #, * or some other special character to the document, to do this just use

to escape the special character.

Syntax

\#`
\*`
\\

Preview

#
*
\

Literal strings

Literal strings are used to insert text correctly into html. For example, if [, ] or other special characters are used they may be inserted into the html incorrectly. Instead use the literal tags and these will be converted to Character Escapes.

Equally any DML code inside a pair of literal tags will be displayed as ordinary text.

Syntax

[literal]<div>[b]Awesome stuff here![/b]</div>[/literal]`
[l]This is the shortened version.[/l]

Preview

<div>[b]Awesome stuff here![/b]</div>
This is the shortened version.

Horizontal line

Syntax

----

Preview

Hyperlinks

Syntax

[link url=http://google.com]Google here[/link]
[and here][http://google.com]
[http://google.com][and here]

Preview

Google here and here and here

Attributes

Click to show

Attribute	Comment
String - url	The URL to navigate to when the link is clicked.

Images

Syntax

[img styled=true name="A cute cat" showName=true width=300]https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg[/img]
[image styled=false name="A cute cat" showName=true width=300]https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg[/image]

Preview

A cute cat

Attributes

Click to show

Attribute	Comment
Boolean - styled	Whether or not the image should be styled. Styling an element makes it look like it is hovering over the page by applying a shadow, and places the element in a div with a white background.
String - name	An optional alias for the picture
Boolean - showName	If this is set to true, the name will show beneath the picture as a title. By default this attribute is set to false.
Number - width	Set this value when you want to change the visible width of the picture. Note you can specify whether the picture takes up a fixed width of pixels (default) or a percentage of the width of the available area. To do so use width=80px or width=80% respectively.
Boolean - hasPopup	When true, the picture will 'pop up' to show the image in full size, when clicked. The name is also displayed in this pop up window. The default for this attribute is true.

Youtube videos

Syntax

[[ Players with options
[yt start=100 end=200 width=100]https://www.youtube.com/watch?v=gtZ7OVoI2nc[/yt]`
[youtube start=100 end=200 width=100]https://www.youtube.com/watch?v=gtZ7OVoI2nc[/youtube]`
[youtube start=100 end=200 width=100 url="https://www.youtube.com/watch?v=gtZ7OVoI2nc"][/youtube]`

[[ Basic player with no options
https://www.youtube.com/watch?v=gtZ7OVoI2nc`

Preview

Spoiler

Syntax

[spoiler text=ButtonText shown=false]
    Some cool shown text here!
[/spoiler]

----

[spoiler shownText="Close me" hiddenText="Open me"]
    Some cool shown text here!
[/spoiler]

----

[spoiler]
    [shownSpoilerText]I'm open![/shownSpoilerText]
    [hiddenSpoilerText]I'm closed, *and can be formatted*![/hiddenSpoilerText]
    I'm inside! *and* |can| _be formatted_ `too!`
[/spoiler]

Preview

ButtonText

Some cool shown text here!

Open me

Some cool shown text here!

I'm closed, and can be formatted!

I'm inside! and can be formatted

too!

Table

Unlike in Markdown tables are designed to be easy to produce from software and easy to read by a human, while looking more like a html table than a real table in code. This is due to the fact that in general with complicated table structures this is much more clear than the likes produced by markdown.

Syntax

[table]
    [header]
        [column]Column A[/column]
        [column]Column B[/column]
    [/header]
    [row]
        [column]1[/column]
        [column]a[/column]
    [/row]
    [row]
        [column]2[/column]
        [column]b[/column]
    [/row]
    [row]
        [column]3[/column]
        [column]c[/column]
    [/row]
[/table]

Preview

Column A	Column B
1	a
2	b
3	c

Row

Rows are useful for splitting up data into columns without the same css style as a full blown table.

Syntax

[row]
    [column]A Mug[/column][column]other text[/column]
[/row]

Preview

A Mug

other text

LaTeX

LaTeX is a useful language for writing mathematical equations and formula. It is commonly used as a full markup language in the creation of academic papers. Here we can use latex to format equations inside DML.

Syntax

[latex]
    x = \left ( \frac{2\pi r^2 + \theta}{r-\pi} \right ) (r+1)
[/latex]

Preview

x = \left ( \frac{2\pi r^2 + \theta}{r-\pi} \right ) (r+1)

Advanced DML

HTML

The html tag allows you to write raw HTML into a website. Anything you put between the tags will not be transpiled at all by the transpiler.

Syntax

[html]<button onclick=alert("Welcome")>Click me!</button>[/html]

Preview

Divs

Divs allow you to create a floating box on the page.

Syntax

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor efficitur tempus. Vivamus in ante id mi faucibus eleifend et a odio. Sed venenatis maximus vestibulum. 
[div styled=true float=left width=100 color=Red fontSize=10]
    Some cool floating div here
[/div] 
Nunc tortor sem, ornare vitae ipsum at, molestie vulputate nisl. Sed consectetur augue non arcu mattis, luctus luctus diam cursus. Pellentesque posuere, diam a ultrices tincidunt, nisi nisi vehicula ligula, sed ornare elit tortor quis erat. Nam odio nulla, tempus in orci nec, tincidunt lobortis justo.

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor efficitur tempus. Vivamus in ante id mi faucibus eleifend et a odio. Sed venenatis maximus vestibulum.

Some cool floating div here

Nunc tortor sem, ornare vitae ipsum at, molestie vulputate nisl. Sed consectetur augue non arcu mattis, luctus luctus diam cursus. Pellentesque posuere, diam a ultrices tincidunt, nisi nisi vehicula ligula, sed ornare elit tortor quis erat. Nam odio nulla, tempus in orci nec, tincidunt lobortis justo.

Iframe

Iframes, just like in HTML, can be used to display other content on your server, or on outbound servers.

Syntax

[iframe styled=true width=800 height=200 url="https://example.com"][/iframe]
[iframe styled=true width=800 height=320 url="../xml demo.html" internal=true][/iframe]

Preview

Custom BBCode elements

Custom BBCode allows you to hack your own DML elements into existence. Custom BBCode should only really ever be used for overriding styles however they can be used to do a lot more. See the example syntax.

The general rule is that any name you give inside BBCode will be given to the class of the html element. This allows you to easily create a custom style with CSS or even custom behaviour with javascript at runtime.

Example 1

[coolStyle]Some cool looking text![/coolStyle]
[html]
    <style>
        .coolStyle {
            background-color:black;
            color:red;
        }
    </style>
[/html]

Preview

Some cool looking text!

Example 2

[uri]Some great text to encode[/uri]
[html]
    <script>
        document.onload = function(){
            var c = document.getElementsByClassName("uri");
            Array.from(c).forEach(function(el){
                el.innerText = encodeURI(el.innerText);
            });
        }
    </script>
[/html]

Preview

Some great text to encode

Page has been last updated on: 5 Mar 2018

Contents

Documentation Markup Language

General Syntax

Nested DML

Indenting text

Paragraphs

Bold text

Italic text

Underlined text

Strikethrough text

New lines

Comment

Headers

Bullet points

Text allignment

Escaping

Literal strings

Horizontal line

Hyperlinks

Images

Youtube videos

Spoiler

Table

Row

LaTeX

Advanced DML

HTML

Divs

Iframe

Custom BBCode elements